<template>
  <view class="account-login-container">
    <!-- 页面装饰图片 -->
    <image class="img-decoration-top" src="/static/images/login-decoration-top.png"></image>
    
    <!-- 返回按钮 -->
    <view class="header">
      <view class="back-button" @tap="goBack">
        <text class="iconfont icon-back"></text>
      </view>
    </view>
    
    <!-- 标题 -->
    <view class="welcome-title">验证码登录</view>
    <view class="welcome-subtitle">欢迎使用糯米AI智能助手</view>
    
    <!-- 登录表单 -->
    <view class="login-form">
      <view class="input-group">
        <image src="/static/images/icons/user.png"></image>
        <view class="line"></view>
        <input 
          type="number" 
          placeholder="请输入手机号" 
          maxlength="11"
          v-model="phoneNumber" 
        />
      </view>
      
      <view class="input-group">
        <image src="/static/images/icons/password.png"></image>
        <view class="line"></view>
        <input 
          type="number" 
          placeholder="请输入验证码" 
          maxlength="6"
          v-model="verifyCode" 
        />
        <view v-if="showSendBtn" class="send-code-btn" @tap="sendVerifyCode">发送验证码</view>
        <view v-else class="send-code-btn disabled">重新发送({{ countdown }}s)</view>
      </view>
      
      <button 
        class="login-btn" 
        :disabled="!isFormValid || isLoading" 
        :loading="isLoading"
        @tap="handleLogin"
      >
        登 录
      </button>
      
      <!-- 优化：游客模式按钮 -->
      <view class="guest-mode-container">
        <button class="guest-mode-btn" @tap="handleGuestLogin">
          <text class="guest-text">游客模式</text>
        </button>
      </view>
    </view>
    
    <!-- 协议区域 -->
    <view class="agreement">
      <checkbox-group @change="handleAgreeChange">
        <checkbox :value="1" :checked="isAgree" style="transform: scale(0.7);"/>
        <text class="agreement-text">已阅读并同意</text>
        <text class="link" @tap="showAgreement">《服务协议》</text>
        <text class="agreement-text">和</text>
        <text class="link" @tap="showPrivacy">《隐私政策》</text>
      </checkbox-group>
    </view>
    
    <!-- 第三方登录 -->
    <view class="third-party-login">
      <view class="divider">
        <view class="line"></view>
        <text>其他登录方式</text>
        <view class="line"></view>
      </view>
      
      <view class="third-party-icons">
        <button 
          class="icon-wrapper" 
          open-type="getPhoneNumber"
          @getphonenumber="handleWxLogin"
        >
          <image src="/static/images/icons/wx.png"></image>
          <text>微信登录</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useUserStore } from '@/stores'
import wxAuth from '@/utils/wxAuth'
import api from '@/api/modules'

const userStore = useUserStore()
const phoneNumber = ref('')
const verifyCode = ref('')
const isLoading = ref(false)
const isAgree = ref(false) // 默认不勾选，需要用户主动同意
const showSendBtn = ref(true)
const countdown = ref(60)

// 表单验证
const isFormValid = computed(() => {
  return (
    phoneNumber.value.trim() !== '' && 
    /^1[3-9]\d{9}$/.test(phoneNumber.value) &&
    verifyCode.value.trim() !== ''
  )
})

// 处理协议勾选
const handleAgreeChange = (e) => {
  isAgree.value = e.detail.value.length > 0
}

// 发送验证码
const sendVerifyCode = async () => {
  if (!phoneNumber.value) {
    uni.showToast({ title: '请输入手机号', icon: 'none' })
    return
  }
  
  if (!/^1[3-9]\d{9}$/.test(phoneNumber.value)) {
    uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
    return
  }
  
  try {
    uni.showLoading({ title: '发送中...' })
    
    // 调用发送验证码API
    const res = await api.auth.sendCode({ phoneNumber: phoneNumber.value })
    
    if (res.code === 200) {
      // 开始倒计时
      showSendBtn.value = false
      const timer = setInterval(() => {
        countdown.value--
        if (countdown.value <= 0) {
          clearInterval(timer)
          countdown.value = 60
          showSendBtn.value = true
        }
      }, 1000)
      
      uni.showToast({ title: '验证码已发送', icon: 'success' })
    } else {
      uni.showToast({ title: res.message || '发送失败，请重试', icon: 'none' })
    }
  } catch (error) {
    console.error('发送验证码失败:', error)
    uni.showToast({ title: '发送失败，请重试', icon: 'none' })
  } finally {
    uni.hideLoading()
  }
}

// 处理验证码登录
const handleLogin = async () => {
  if (!isFormValid.value || isLoading.value) return
  
  if (!isAgree.value) {
    uni.showModal({
      title: '提示',
      content: '请先阅读并同意服务协议和隐私政策',
      showCancel: false
    })
    return
  }
  
  isLoading.value = true
  
  try {
    uni.showLoading({
      title: '登录中...',
      mask: true
    })
    
    // 登录前先清除所有缓存，确保登录后能获取全新数据
    uni.removeStorageSync('collectedDevices');  // 清除首页设备列表缓存
    uni.removeStorageSync('hardwareDevices');   // 清除设备管理列表缓存
    uni.removeStorageSync('discoverLastLoadTime');  // 清除发现页缓存
    
    // 获取客户端IP地址
    const ip = await getClientIp()
    
    // 调用手机号验证码登录API
    const res = await api.auth.phoneLogin({
      phoneNumber: phoneNumber.value,
      code: verifyCode.value,
      ip
    })
    
    if (res.code === 200) {
      // 先隐藏loading，防止showLoading/hideLoading不配对的警告
      uni.hideLoading()
      
      // 处理登录成功
      userStore.handleLoginSuccess(res)
      
      // 额外手动触发登录状态变化事件，确保数据刷新
      setTimeout(() => {
        uni.$emit('loginStateChanged', { isLogin: true });
      }, 200);
      
      // 记录登录时间
      uni.setStorageSync('lastLoginTime', Date.now())
      
      // 显示登录成功提示
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      })
      
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/index/index'
        })
      }, 1500)
    } else {
      uni.hideLoading()
      uni.showToast({
        title: res.message || '验证码错误或已过期',
        icon: 'none'
      })
    }
  } catch (error) {
    console.error('登录失败:', error)
    uni.hideLoading()
    uni.showToast({
      title: error.message || '登录失败，请重试',
      icon: 'none'
    })
  } finally {
    isLoading.value = false
  }
}

// 优化：游客模式登录
const handleGuestLogin = async () => {
  if (!isAgree.value) {
    uni.showModal({
      title: '提示',
      content: '请先阅读并同意服务协议和隐私政策',
      showCancel: false
    })
    return
  }
  
  // 显示游客模式功能说明
  uni.showModal({
    title: '游客模式说明',
    content: '游客模式下，您可以浏览和查询设备信息，但无法添加收藏、保存历史记录等。登录后可享受完整功能。',
    confirmText: '继续使用',
    cancelText: '返回',
    success: async (res) => {
      if (res.confirm) {
        try {
          uni.showLoading({
            title: '正在登录...',
            mask: true
          })
          
          // 登录前先清除所有缓存，确保登录后能获取全新数据
          uni.removeStorageSync('collectedDevices');  // 清除首页设备列表缓存
          uni.removeStorageSync('hardwareDevices');   // 清除设备管理列表缓存
          uni.removeStorageSync('discoverLastLoadTime');  // 清除发现页缓存
          
          // 先隐藏loading，防止showLoading/hideLoading不配对的警告
          uni.hideLoading()
          
          // 直接使用用户存储中的游客模式方法
          userStore.setGuestMode()
          
          // 额外手动触发登录状态变化事件，确保数据刷新
          setTimeout(() => {
            uni.$emit('loginStateChanged', { isLogin: true });
          }, 200);
          
          // 记录登录时间
          uni.setStorageSync('lastLoginTime', Date.now())
          
          // 跳转到首页
          uni.switchTab({
            url: '/pages/index/index'
          })
          
          // 显示轻提示，提醒用户随时可以登录
          setTimeout(() => {
            uni.showToast({
              title: '您可以随时点击"我的"页面登录',
              icon: 'none',
              duration: 3000
            })
          }, 1000)
        } catch (error) {
          console.error('游客登录失败:', error)
          uni.showToast({
            title: '游客登录失败，请重试',
            icon: 'none'
          })
        }
      }
    }
  })
}

// 获取客户端IP地址
const getClientIp = () => {
  return new Promise((resolve) => {
    // 在小程序环境中无法直接获取客户端IP
    // 这里返回空字符串，实际IP会在后端通过请求头获取
    resolve('')
  })
}

  // 处理微信登录
const handleWxLogin = async (e) => {
  if (!isAgree.value) {
    uni.showModal({
      title: '提示',
      content: '请先阅读并同意服务协议和隐私政策',
      showCancel: false
    })
    return
  }
  
  // 处理用户拒绝授权的情况
  if (e.detail.errMsg === 'getPhoneNumber:fail user deny') {
    uni.showModal({
      title: '提示',
      content: '您已拒绝授权手机号，可以选择验证码登录或游客模式继续使用',
      confirmText: '我知道了',
      showCancel: false
    })
    return
  }
  
  if (e.detail.errMsg === 'getPhoneNumber:ok') {
    isLoading.value = true
    
    try {
      uni.showLoading({
        title: '登录中...',
        mask: true
      })
      
      // 登录前先清除所有缓存，确保登录后能获取全新数据
      uni.removeStorageSync('collectedDevices');  // 清除首页设备列表缓存
      uni.removeStorageSync('hardwareDevices');   // 清除设备管理列表缓存
      uni.removeStorageSync('discoverLastLoadTime');  // 清除发现页缓存
      
      // 使用工具类处理登录
      const result = await wxAuth.handleWxLogin({
        encryptedData: e.detail.encryptedData,
        iv: e.detail.iv
      })
      
      if (result.success) {
        // 确保触发数据刷新
        uni.hideLoading(); // 先隐藏loading，防止showLoading/hideLoading不配对的警告
        
        // 重要：调用userStore.handleLoginSuccess处理登录成功逻辑，确保触发loginStateChanged事件
        if (result.data) {
          userStore.handleLoginSuccess({
            code: 200, 
            data: result.data
          })
        } 
        
        // 无论如何都手动触发登录状态变化事件，确保数据刷新
        setTimeout(() => {
          uni.$emit('loginStateChanged', { isLogin: true });
        }, 200);
        
        // 记录登录时间，用于自动登录
        uni.setStorageSync('lastLoginTime', Date.now())
        
        // 显示登录成功提示
        uni.showToast({
          title: '登录成功',
          icon: 'success',
          duration: 1500
        })

        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }, 1500)
      } else {
        uni.hideLoading();
        uni.showToast({
          title: result.message || '登录失败，请重试',
          icon: 'none'
        })
      }
    } catch (error) {
      console.error('微信登录失败:', error)
      uni.hideLoading();
      uni.showToast({
        title: '微信登录失败，请重试',
        icon: 'none'
      })
    } finally {
      isLoading.value = false
    }
  }
}

// 查看协议
const showAgreement = () => {
  uni.navigateTo({
    url: '/pages/login/profile?type=agreement'
  })
}

// 查看隐私政策
const showPrivacy = () => {
  uni.navigateTo({
    url: '/pages/login/profile?type=privacy'
  })
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 监听用户数据加载完成事件
const setupDataLoadedListener = () => {
  uni.$on('userData_loaded', (data) => {
    console.log('检测到用户数据已加载，刷新页面');
    // 直接刷新页面数据，不重新请求API
    refreshPageFromCache();
  })
}

// 从缓存刷新页面
const refreshPageFromCache = () => {
  // 从本地存储获取用户数据
  const userInfo = uni.getStorageSync('userInfo');
  if (userInfo) {
    // 更新页面显示
    console.log('使用缓存数据更新页面');
    // 这里根据具体页面需要进行刷新
  }
}
</script>

<style lang="scss">
.account-login-container {
  min-height: 100vh;
  padding: 0 60rpx;
  position: relative;
  background: #fff;
  overflow: hidden;
  
  // 游客模式区域
      .guest-mode-container {
        margin-bottom: 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        
        .guest-mode-btn {
          width: 70%;
          height: 80rpx;
          line-height: 80rpx;
          background-color: #fff;
          color: var(--primary-color, #5677fc);
          border: 2px solid var(--primary-color, #5677fc);
          border-radius: 40rpx;
          font-size: 28rpx;
		  margin-top: 40rpx;
          margin-bottom: 20rpx;
          position: relative;
          overflow: hidden;
          
          &:disabled {
            opacity: 0.6;
            border-color: #ccc;
            color: #ccc;
          }
          
          &::after {
            border: none;
          }
          
          .guest-text {
            font-size: 28rpx;
          }
          
          // 微妙的动画效果
          &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(86,119,252,0.05), rgba(86,119,252,0.1), rgba(86,119,252,0.05));
            transform: translateX(-100%);
            animation: shimmer 3s infinite;
          }
          
          @keyframes shimmer {
            100% {
              transform: translateX(100%);
            }
          }
        }
        
        .guest-hint {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 24rpx;
          color: #666;
          
          .hint-detail {
            color: #999;
            margin-top: 5rpx;
            font-size: 22rpx;
          }
        }
      }
  
  // 装饰图片
  .img-decoration-top {
    position: absolute;
    width: 100%;
    top: -150rpx;
    right: 0;
    z-index: 0;
  }
  
  // 顶部返回按钮
  .header {
    padding-top: 80rpx;
    position: relative;
    z-index: 1;
    
    .back-button {
      font-size: 40rpx;
      color: #333;
      width: 40rpx;
      height: 40rpx;
    }
  }
  
  // 欢迎标题
  .welcome-title {
    font-size: 46rpx;
    font-weight: bold;
    color: #333;
    margin-top: 80rpx;
    position: relative;
    z-index: 1;
  }
  
  .welcome-subtitle {
    font-size: 28rpx;
    color: #999;
    margin-top: 20rpx;
    margin-bottom: 80rpx;
    position: relative;
    z-index: 1;
  }
  
  // 登录表单
  .login-form {
    position: relative;
    z-index: 1;
    
    .input-group {
      position: relative;
      margin-bottom: 40rpx;
      display: flex;
      align-items: center;
      background: #f8f7fc;
      border: 1px solid #e9e9e9;
      border-radius: 50rpx;
      height: 90rpx;
      
      image {
        width: 40rpx;
        height: 40rpx;
        margin-left: 40rpx;
      }
      
      .line {
        width: 2rpx;
        height: 40rpx;
        background-color: #dedede;
        margin: 0 20rpx;
      }
      
      input {
        flex: 1;
        height: 90rpx;
        font-size: 28rpx;
      }
      
      .send-code-btn {
        background: #5677fc;
        color: #fff;
        font-size: 24rpx;
        border-radius: 50rpx;
        height: 60rpx;
        line-height: 60rpx;
        padding: 0 25rpx;
        margin-right: 20rpx;
        
        &.disabled {
          background-color: #a7a7a7;
        }
      }
    }
    
    .login-btn {
      width: 100%;
      height: 90rpx;
      line-height: 90rpx;
      background: #5677fc;
      color: #fff;
      font-size: 32rpx;
      border-radius: 50rpx;
      box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
      border: none;
      
      &:disabled {
        opacity: 0.6;
      }
    }
    
    // 游客模式样式
    .guest-mode {
      display: flex;
      justify-content: center;
      margin-top: 30rpx;
      
      .guest-text {
        font-size: 28rpx;
        color: #5677fc;
      }
      
      .guest-hint {
        font-size: 24rpx;
        color: #999;
        margin-left: 10rpx;
      }
    }
  }
  
  // 协议区域
  .agreement {
    display: flex;
    justify-content: center;
    margin-top: 60rpx;
    position: relative;
    z-index: 1;
    
    .agreement-text {
      font-size: 24rpx;
      color: #999;
    }
    
    .link {
      font-size: 24rpx;
      color: #5677fc;
    }
  }
  
  // 第三方登录
  .third-party-login {
    position: fixed;
    bottom: 80rpx;
    left: 0;
    width: 100%;
    z-index: 1;
    
    .divider {
      display: flex;
      align-items: center;
      padding: 0 60rpx;
      margin-bottom: 50rpx;
      
      .line {
        flex: 1;
        height: 1rpx;
        background-color: #e0e0e0;
      }
      
      text {
        font-size: 24rpx;
        color: #999;
        padding: 0 20rpx;
      }
    }
    
    .third-party-icons {
      display: flex;
      justify-content: center;
      
      .icon-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: transparent;
        border: none;
        padding: 0;
        margin: 0;
        
        &::after {
          border: none;
        }
        
        image {
          width: 80rpx;
          height: 80rpx;
          margin-bottom: 15rpx;
        }
        
        text {
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }
}
</style>
